<style>
	main { width: 100%; }
	main > div, main > table { text-align: center; }

	table#userList { width: 100%; margin-bottom: 30px; border: 1px outset #ccc; }
	table#userList th{ background-color: #008; color: lightgrey; }
	table#userList td { text-align: center; height: 20px;  background: #eee; border-bottom: 1px solid darkgrey; border-right: 1px solid darkgrey;}
	table#userList tr:nth-child(even) td { background: lightgrey; }
	table#userList td button {width: 60px; font-size: 14px; margin: 0; padding: 0; }

	.newUserBlock { position: absolute; width: 400px; height: 360px; left:50%; top: 45%; margin-left: -240px; margin-top: -180px; display: none; }
	.newUser { width: 100%; height: 100%; background-color: lightgrey; border: groove 2px white; padding: 5 20px;
		display: flex; flex-flow: column nowrap; align-items: center; }
	.newUser > .title { width: 100%; height: 36px; line-height: 36px; background: darkblue; color: white;}	 
	.newUser input, .newUser select { width: 300px; height: 32px; margin-top: 20px; padding: 0; box-sizing: border-box; }
	.newUser button { width: 120px; height: 32px; margin-top: 20px; }

	.right_setting { position: absolute; width: 320px; height: 140px; background-color: lightgrey; border: groove 2px white; display: none; }
	.right_setting > div { margin: 5px 10px; height: 24px;  }
	.right_setting > .title  { background: darkblue; color: white; }
	.right_setting select { width: 300px; height: 28px; margin-top: 5px; }
	.right_setting button { width: 60px; margin: auto 10px; }

</style>

<div class="whitespace"></div>
<button class="btn_newUser">新增用户</button>
<div class="whitespace"></div>

<table id="userList">
	<thead>
		<tr>
			<th>显示名</th>
			<th>登录名</th>
			<th>用户类型</th>
			<th>权限名称</th>
			<th>操作</th>
		</tr>
	</thead>
</table>

<div class="newUserBlock">
	<div class="newUser">
		<div class="title">新建用户</div>
		<div><label>　用户名：</label><input type="text" name="userName" placeholder="请输入用户名(显示用）"></div>
		<div><label>　登录名：</label><input type="text" name="loginName" placeholder="请输入登录名（登录用）"></div>
		<div><label>　　密码：</label><input type="password" name="password" placeholder="请输入密码"></div>
		<div><label>确认密码：</label><input type="password" name="password2" placeholder="请再次输入密码"></div>
		<div><label>选择角色：</label><select name="user_type" placeholder="请选择角色">
			<option value="1">管理员</option>
			<option value="2">高管</option>
			<option value="3">数据专员</option>
			<option value="4">专项查询</option>
			<option value="11">大区总监</option>
			<option value="12">城市经理</option>
		</select></div>
		<div><button class="btn_new">创建</button>　　<button class="btn_cancle">取消</button></div>

	</div>
</div>

<div class="right_setting">
	<div class="title"><span class="userName">朱自清</span> 权限配置：</div>
	<select class="user_type">
		<option>请选择</option>
		<option value="1">管理员</option>
		<option value="2">高管</option>
		<option value="3">数据专员</option>
		<option value="4">专项查询</option>
		<option value="11">大区总监</option>
		<option value="12">城市经理</option>
	</select>
	<select class="right_id"></select>
	<div><button class="add_right">确定</button><button class="cancle">取消</button></div>
</div>

<script>
	var table = $("table#userList").DataTable({
		ajax: {
			url: dataDomain + "getOperationUser.php",
			type: 'Post',
			data: { do: 'getUserInfo'},
			dataSrc: ''
		},
		columns: [
			{ 'data': 'user_name'}, 
			{ 'data': 'login_name'},
			{ 'data': 'user_type' , 'render': function(data) { 
				var right_show = {1:"管理员", 2:"高管", 3:"数据专员", 4:"专项查询", 11:"大区总监", 12:"城市经理"};
				return right_show[data];
			}},
			{ 'data': 'title', 'render': function(data) {
				if(data){
					return data;
				}else{
					return '————'
				}
			}},
			{ 'data': 'user_id', 'orderable' : false, 'width' : '120px', 'className' : 'act',	'render': function(id, type, row, meta){
				var str = "<button class='delete' data-id='"+id+"'>删除</button>|"
					+ "<button class='setRight'  data-id='"+id+"'>权限</button>"
				return 	str;
			}}
		],
		
		language: {
            "lengthMenu": "每页显示 _MENU_ 条记录",
            "zeroRecords": " ",
            "info": "当前从第 _START_ 条到第 _END_ 条  共 _TOTAL_ 条",
            "infoEmpty": "无记录",
            "infoFiltered": "(从 _MAX_ 条记录过滤)",
            "search": "查找：",
            "processing": "载入中",
            "paginate": {
                "first": "首页",
                "previous": "上一页",
                "next": "下一页",
                "last": "尾页"
            }
        },
	});

	// 监听按钮操作，在每次table重绘之后，启动监听
	table.on("draw", function(){
		$("td.act button.delete").click(function(e){
			var id = e.target.dataset.id;
			if(!confirm('确定要删除？')) return;
			$.get(dataDomain + "curd.php", {do: 'delete', table: 'tj.operation_users', conditions: JSON.stringify({user_id: id})}, function(r){
				console.log(r);
				if(r == "1"){
					alert("删除成功")
					table.ajax.reload();
					table.draw();
				}else{
					alert("删除失败")
				}
			})
		});
		$("td.act button.setRight").click(function(e){
			var id = e.target.dataset.id;
			for(var i in table.ajax.json()){
				var x = table.ajax.json()[i];
				if(x.user_id == id){
					$(".right_setting span.userName").html(x.user_name);
					$(".right_setting .add_right").attr("data-id", id); // 将选定的对像id保存到确定按钮上，便于调用
				}
			}
			$(".right_setting").css({left: e.pageX - 480 , top: e.pageY + 20}).show();
		})
	})

	// 设置权限弹窗 相关处理
	// 关闭弹窗
	$(".right_setting .cancle").click(function(){
		$(".right_setting").hide();
	})
	// 选择用户类型后，权限下拉框联动
	$(".right_setting select.user_type").change(function(){
		
		$(".right_setting select.right_id").html("");
		var id = $(this).val();
		if(id == 11 || id == 12){
			$.get(dataDomain + "getOperationUser.php", {do: 'getRightId', user_type: id}, function(r){
				console.log(r);
				for(var i in r){
					var opt = $("<option></option>");
					opt.val(r[i].id);
					opt.html(r[i].title);
					$(".right_setting select.right_id").append(opt);
				}
			}, 'json');
		}
	})

	// 保存权限修改
	$(".right_setting .add_right").click(function(){
		var id = $(this).attr("data-id");
		// console.log("new get id is " + id)
		var user_type = $(".right_setting select.user_type").val();
		var right_id = $(".right_setting select.right_id").val();
		// console.log(user_type + ', ' + right_id);
		$.get(dataDomain + "getOperationUser.php", {do: "setRight", user_id: id, user_type: user_type, right_id: right_id}, function(r){
			console.log(r);
			$(".right_setting").hide();
			table.ajax.reload().draw();
		})
	})

	// add_user
	$("button.btn_new").click(function(){
		var username = $("input[name=userName]").val();
		var loginname = $("input[name=loginName]").val();
		var password = $("input[name=password]").val();
		var password2 = $("input[name=password2]").val();
		var user_type = $("select[name=user_type]").val();

		if( !username || !loginname || !password || !password2){
			alert("something is empty");
			return;
		}else if(password != password2){
			alert("passwords are different");
			return;
		}else{
			var fields = {user_name: username, login_name: loginname, password: hex_md5(password), user_status: 1, user_type: user_type};
			$.get(dataDomain + "curd.php", {do: 'insert', table: 'tj.operation_users', fields: JSON.stringify(fields)}, function(r){
				console.log(r)
				alert("新操作人员已添加！");
				$("button.operation_users").click();
			})
		}

	})

	// 新增用户弹窗，按取消按钮隐藏弹窗
	$(".newUser .btn_cancle").click(function(){
		$(".newUserBlock").hide();
	})
	// 新增用户按钮，显示新增用户弹窗
	$("button.btn_newUser").click(function(){
		$(".newUserBlock").show();
	})
</script>
